<script setup lang="ts">

import schoolElevatorNavigation from '@/common/components/school-elevator-navigation.vue';
import schoolProject from '@/common/components/school-project.vue';
import schoolSwiper from '@/common/components/school-swiper.vue';
defineOptions({
  name: 'HomePage',
})
const itemList = ref([
  {
    id: 1,
    image: '/src/assets/01.svg',
    title: '拔河项目：力量与团队的终极对决',
    href: "tug-of-war",
    content:
      '团结一心，力量对决！拔河项目不仅考验体力，更是团队合作与默契的体现，快来体验激动人心的对抗赛吧！',
  },
  {
    id: 2,
    image: '/src/assets/02.svg',
    title: '接力赛：快速反应，激烈竞争',
    href: "relay-race",
    content:
      '接力赛是对速度与耐力的极限挑战，团队合作的力量将在赛道上展现。每一次交棒，都是冲刺的起点，敢来挑战吗？',
  },
  {
    id: 3,
    image: '/src/assets/03.svg',
    title: '短跑项目：速度的极限挑战',
    href: 'sprint',
    content:
      '短跑是一项考验爆发力和速度的极限运动，争分夺秒，谁能在短短的几秒钟内突破自己的极限？快来挑战，超越自我！',
  },
  {
    id: 4,
    image: '/src/assets/04.svg',
    title: '篮球项目：团队与技巧的完美结合',
    href: "basketball",
    content:
      '篮球是一项考验团队配合和个人技巧的运动，运球、传球、投篮，每一个动作都需要默契与精准。加入我们，感受篮球的激情与挑战，成就团队的胜利！',
  },
])

const projectRef = ref(null)
const navigationIsVisible = ref(false)

const { stop } = useIntersectionObserver(
  projectRef,
  ([entry]) => {
    console.log("元素进入了视口:", entry.isIntersecting);

    navigationIsVisible.value = entry.isIntersecting || false
  }
)

</script>

<template>
  <div class="home">
    <!-- swiper 轮播图 -->
    <school-swiper />
    <!-- project 比赛项目 -->
    <div ref="projectRef">
      <school-project :items="itemList" />
    </div>
    <school-elevator-navigation v-show="navigationIsVisible" />
  </div>
</template>

<style scoped lang="scss">
.home {
  background-color: white;
}
</style>
